<script setup lang="ts">
import CaseWorks from "@/components/CaseWorks.vue"
import { ref,defineEmits,getCurrentInstance,onUnmounted } from "vue"
const {proxy} = getCurrentInstance();
const emit = defineEmits(['changeHeaderCSS']);
const changeHeaderCSS = (flag:boolean)=>{
  emit('changeHeaderCSS',flag);
}
const underHeader = ref();
// 监听元素是否在可视区域内组件
import { useIntersectionObserver } from '@vueuse/core'
//调用这个函数useIntersectionObserver，里面传三个参数
// 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为）
// 2. target 是观察的目标容器 dom对象 | 组件对象
// 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出\
const { } = useIntersectionObserver(
  underHeader,// target 是vue的对象引用。是观察的目标
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom
  ([{ isIntersecting }]: any) => {
    if (isIntersecting) {
      // 子组件监听进入可视区域调用父组件方法
      //进入可视区域
      changeHeaderCSS(false)      
      if (browerWidth < 1200) {
        changeHeaderCSS(true)
      }
    } else {
      changeHeaderCSS(true);
    }
  },
  // threshold 表示观察的目标进入视口的比例，取值范围是从 0 到 1
  // 默认是0.1。 值越大表示观察越不灵敏
  { threshold: 0.1 }
)
// 等比缩放
//获取整个界面的宽
let browerWidth = window.innerWidth;
//整个界面的宽*0.36 = 高
let bannerHeight = ref(browerWidth * 0.4)
// 浏览器加载时，判断宽度是否大于1200,从而判断头部右侧显示菜单还是图标
const headerNav = ref(browerWidth > 1200 );
const listenerReSize = ()=>{
  browerWidth = window.innerWidth;
  // 如果宽度小于1200,头部菜单变为图标
  if(browerWidth < 1200 ){
    //头部菜单变为图标
    headerNav.value = false;
    changeHeaderCSS(true)
    bannerHeight.value = 40;
  }else{
    // 头部图标变为菜单
    headerNav.value = true;
    changeHeaderCSS(false)
    bannerHeight.value = browerWidth * 0.4;
  }
}
window.addEventListener('resize',listenerReSize);
onUnmounted(() => {
  window.removeEventListener('resize',listenerReSize);
})
const workCaseList = ref();
const caseArray = ref(new Array);
  const getWorkCaseList = async () => {
  let result = await proxy.Request({
    url: "/workCase/loadDataList",
    params: {
      pageNo: 1,
      pageSize: 10000
    },
    showLoading: false
  })
  if (!result) {
    return;
  }
  workCaseList.value = result.data.list;
  for (let i = 0; i < workCaseList.value.length; i++) {
    caseArray.value.push({
      url: '/caseDetail/' + workCaseList.value[i].id,
      img: workCaseList.value[i].caseImg,
      p1: workCaseList.value[i].caseSlogan ? workCaseList.value[i].caseSlogan : workCaseList.value[i].caseClientName,
      p2: workCaseList.value[i].caseTitle,
      p3: workCaseList.value[i].caseContent,
      workCaseCategory: workCaseList.value[i].workCaseCategoryList.map(s => { return s.id })
    })
  }
}
getWorkCaseList();
</script>

<template>
  <div ref="underHeader"></div>
  <div class="case-main" >
    <CaseWorks :caseArray="caseArray"></CaseWorks>
  </div>
  
</template>

<style lang="scss" scoped>
.case-main{
  padding: 100px 2.5% 100px;
}

@media screen and (max-width: 1440px) {

  .warp-type-list,.active {
    font-size: 12px;
  }
}
@media screen and (max-width: 1200px) {

  .case-main{
    padding: 50px 2.5% 100px;
  }
}
</style>